import React from "react";
import { List,Icon } from 'antd';
const {Item} = List;
import classNames from 'classnames'

function TodoList({todos,onDelete}) {
    // const onDelete = () => {}

    return (
        <div className="list-wrap">
        {/* {todos.map(todo =><li key={todo.id}>{todo.text}</li>)} */}
            { todos.length ===0? (
                <p>暂无代办事项</p>
            ):(
                // List 组件来自 antd
                // 逻辑 配置数据源
                // renderItem 每一个jsx输出
                <List itemLayout="horizontal"
                    dataSource={todos}
                    renderItem={({id,text,finished},index)=>{
                        const className = classNames({
                            // 配置类名 为true 添加上去
                            "list-item":true,
                            "list-item__finished":finished
                        })
                        return(
                            <Item className={className}>
                                <div className="list-item-wrap ">
                                    <span className="list-item-text">{text}</span>
                                    <Icon type="delete" onClick={onDelete.bind(null,id)}/>
                                </div>
                            </Item>
                        )
                    }}
                />
            )}
        </div>
    )
}

export default TodoList;